<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <link rel="stylesheet" href="icon.css">
    <link href="material-components-web.min.css" rel="stylesheet">
    <script src="material-components-web.min.js"></script>
    <style>
        html, body {
          margin: 0;
          padding: 0;
        }
        .login-container {
          padding: 10px;
          margin-top: 10px;
        }
        .my-card__media {
          background-image: url("img/love1.jpg");
        }
        .card_action_container {
          display: flex;
          justify-content: center;
        }
        .login-info-container {
          display: flex;
          /* justify-content: center; */
          flex-direction: column;
          align-items: center;

          padding: 10px 0;
        }
        #love-words {
          padding: 10px;
          text-indent: 2em;
        }
    </style>
</head>
<body>
  <div class="login-container">
    <div class="mdc-card mdc-card--outlined">
      <div class="my-card__media mdc-card__media mdc-card__media--16-9">
        <div class="mdc-card__media-content"></div>
      </div>
      <div class="mdc-card__content" id="love-words">我想说...</div>
      <div class="mdc-card__content login-info-container">
        <label class="mdc-text-field mdc-text-field--outlined" style="width: 80%;">
          <span class="mdc-notched-outline">
            <span class="mdc-notched-outline__leading"></span>
            <span class="mdc-notched-outline__notch">
              <span class="mdc-floating-label" id="nick-name-label">昵称</span>
            </span>
            <span class="mdc-notched-outline__trailing"></span>
          </span>
          <input type="text" id="nick-name" class="mdc-text-field__input" aria-labelledby="nick-name-label">
        </label>
        <label style="height: 10px"></label>
        <label class="mdc-text-field mdc-text-field--outlined" style="width: 80%;">
          <span class="mdc-notched-outline">
            <span class="mdc-notched-outline__leading"></span>
            <span class="mdc-notched-outline__notch">
              <span class="mdc-floating-label" id="auth-code-label">授权码</span>
            </span>
            <span class="mdc-notched-outline__trailing"></span>
          </span>
          <input type="text" id="auth-code" class="mdc-text-field__input" aria-labelledby="auth-code-label">
        </label>
      </div>
      <div class="mdc-card__actions card_action_container" >
        <div class="mdc-card__action-buttons">
          <button class="mdc-button mdc-button--outlined mdc-card__action mdc-card__action--button" id="login-button">
            <div class="mdc-button__ripple"></div>
            <span class="material-icons mdc-fab__icon">login</span>
            <span class="mdc-button__label">&nbsp;&nbsp;登录</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <aside class="mdc-snackbar">
    <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
      <div class="mdc-snackbar__label" aria-atomic="false" id="snackbar-content">
        填写所有内容哦~
      </div>
      <div class="mdc-snackbar__actions" aria-atomic="true">
        <button type="button" class="mdc-button mdc-snackbar__action">
          <div class="mdc-button__ripple"></div>
          <span class="mdc-button__label">知道了</span>
        </button>
      </div>
    </div>
  </aside>
  <script>
    const {MDCRipple} = mdc.ripple
    const {MDCTextField} = mdc.textField
    const {MDCSnackbar} = mdc.snackbar

    const selector = '.mdc-button, .mdc-icon-button, .mdc-card__primary-action';
    const ripples = [].map.call(document.querySelectorAll(selector), function(el) {
      return new MDCRipple(el);
    });

    const textFields = [].map.call(document.querySelectorAll('.mdc-text-field'), function(el) {
      return new MDCTextField(el);
    });

    const snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
    const simpleNotify = (message) => {
      const ele = document.getElementById("snackbar-content")
      ele.innerHTML = message;
      snackbar.open();
    }
    const getRandomLoveWords = async () => {
      try {
        let resp = await fetch('https://api.uomg.com/api/rand.qinghua?format=json')
        let words = await resp.json();
        return words.content;
      } catch(e) {
        return '爱就是爱'
      }
    }
    const setLoveWords = (wordId='love-words') => {
      let s = document.getElementById(wordId)
      getRandomLoveWords().then(text => {
        s.innerText = text
      })
    }
    const loginBtnEle = document.getElementById("login-button")
    const nickNameEle = document.getElementById("nick-name")
    const authCodeEle = document.getElementById("auth-code")

    const getLoginInfo = () => {
      let result = {};
      result.nickName = nickNameEle.value
      result.authCode = authCodeEle.value
      if (!result.nickName || !result.authCode) {
        throw Error('请录入所有内容')
      }
      return result
    }
    loginBtnEle.addEventListener("click", () => {
      try {
        const loginInfo = getLoginInfo();
        localStorage.setItem("$ACCESS_TOKEN", loginInfo.authCode)
        localStorage.setItem("$NICK_NAME", loginInfo.nickName)
        window.location.href = '../index.html?date='+new Date().getTime()
      } catch (e) {
        simpleNotify("填写所有内容哦")
        console.error(e)
      }
    })

    window.addEventListener("load", async () => {
      setLoveWords(); 
    })
    window.addEventListener("load", () => {
        let access_token = localStorage.getItem("$ACCESS_TOKEN")
        let nick_name = localStorage.getItem("$NICK_NAME")
    
        if (!access_token || !nick_name) {
            console.warn('login info not integrated.')
        } else {
            console.warn('has logined!')
            window.location.href = '../index.html?date='+new Date().getTime()
        }
    })
  </script>
</body>
</html>